<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
    >
      <!-- <el-form-item label="上级分类" prop="parent_id" v-if="firstInput">
        <el-select v-model="dataForm.parent_id" placeholder="请选择">
          <el-option
            v-for="item in typelist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="分类名称" prop="name">
        <el-input
          v-model="dataForm.name"
          maxlength="4"
          placeholder=""
        ></el-input>
      </el-form-item>
      <el-form-item label="推荐至首页">
        <el-switch v-model="dataForm.recommend"> </el-switch>
      </el-form-item>
      <el-form-item label="分类图片">
        <Imglist
          :tip="tip"
          @updataImg="updataImg"
          :limit="1"
          :value="blackImg"
          :dialogVisible="visible"
          style=""
          :zi="true"
        ></Imglist>
      </el-form-item>
      <el-form-item label="排序" prop="order_index">
        <el-input-number
          v-model="dataForm.order_index"
          :min="1"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
import seviceApi from '@/api/serviceApi.js'
import Imglist from './../../oss/oss-uploadImg2'
export default {
  components: {
    Imglist
  },
  data() {
    return {
      visible: false,
      firstInput: true,
      dataForm: {
        id: '0',
        // parent_id: 0,
        name: null,
        order_index: 1,
        recommend: false,
        cover_image: ''
      },
      typelist: [
        {
          name: '顶级',
          id: 0
        }
      ],
      dataRule: {
        name: [
          {
            required: true,
            message: '分类名称不能为空',
            trigger: 'blur'
          }
        ],
        order_index: [
          {
            required: true,
            message: '排序不能为空',
            trigger: 'blur'
          }
        ]
      },
      tip: null,
      blackImg: []
    }
  },
  mounted() {},
  methods: {
    init(id, parent_id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.blackImg = []
      this.dataForm.cover_image = ''
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      // if (parent_id != 0) {
      //   this.firstInput = true
      // } else {
      //   this.firstInput = false
      // }
      this.getTypelist()
      if (id != 0 && id != undefined) {
        // 查询
        seviceApi.getaddHxCategory(id).then((res) => {
          if (res && res.data.code == 200) {
            this.dataForm = res.data.data
            if (res.data.data.cover_image) {
              this.blackImg = res.data.data.cover_image.split(',')
            }
            console.log(this.blackImg)
            console.log(this.dataForm.cover_image)
          }
        })
      } else {
        this.dataForm.recommend = false
      }
    },
    // 上传图片
    updataImg(e) {
      this.dataForm.cover_image = e
      console.log(this.dataForm.cover_image)
    },
    // 获取一级分类
    getTypelist() {
      seviceApi.getHxCategoryList().then((res) => {
        if (res && res.data.code == 200) {
          if (res.data.list.length > 0) {
            let arrs = [
              {
                name: '顶级',
                id: 0
              }
            ]
            this.typelist = arrs.concat(res.data.list)
          }
        }
      })
    },
    // 提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dataForm.cover_image == '') {
            return this.$message.error('请上传分类图片')
          }
          let cover_image = ''
          if (Array.isArray(this.dataForm.cover_image)) {
            cover_image = this.dataForm.cover_image[0]
          } else {
            cover_image = this.dataForm.cover_image
          }
          var param = {
            // parent_id: this.dataForm.parent_id,
            name: this.dataForm.name,
            order_index: this.dataForm.order_index,
            recommend: this.dataForm.recommend,
            cover_image: cover_image
          }

          if (this.dataForm.id != 0) {
            var key = 'id'
            var id = this.dataForm.id
            param[key] = id
            seviceApi.updateHxCategory(param).then((res) => {
              if (res && res.data.code == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('updataList', 1)
              }
            })
          } else {
            seviceApi.addHxCategory(param).then((res) => {
              if (res && res.data.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('updataList', 1)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.img-box {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px dashed #cccccc;
  .icon {
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #cccccc;
  }
  img {
    width: 98px;
    height: 98px;
  }
  .upload-input {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 100;
    border: none;
  }
}
</style>
